import NProgress from "../utils/progress";
import {
  type Router,
  type RouteRecordRaw,
  createRouter,
  createWebHistory
} from "vue-router";
// --- 自动拉取并注册动态路由 ---
import { getAsyncRoutes } from "@/api/routes";
import errorRoutes from './modules/error';

/** 路由白名单 */
// const whiteList = ["/login"];
// const { VITE_HIDE_HOME } = import.meta.env;

/**
 * 基础路由配置
 * 
 * 根路径 "/" 使用布局组件，默认展示 home 页面：
 * - 访问网站时在布局组件中显示 home 页面内容
 * - URL 保持为 "/"，不显示任何额外路径
 * - 使用布局组件，在布局中渲染 home 组件
 */
const remainingRouter: RouteRecordRaw[] = [
  {
    path: "/",
    name: "Root",
    // 使用布局组件，在布局中展示 home 页面
    component: () => import("@/layout/index.vue"),
    children: [
      {
        path: "", // 空路径，作为默认子路由
        name: "HomePage",
        component: () => import("@/views/home/index.vue"),
      },
    ]
  },
  errorRoutes
];

/** 创建路由实例 */
export const router: Router = createRouter({
  history: createWebHistory(), // TODO: 替换为你的 history 模式
  routes: remainingRouter,
  strict: true,
  scrollBehavior(_to, _from, savedPosition) {
    return new Promise(resolve => {
      if (savedPosition) return savedPosition;
      if (_from.meta.saveSrollTop) {
        const top: number = document.documentElement.scrollTop || document.body.scrollTop;
        resolve({ left: 0, top });
      } else {
        resolve({ left: 0, top: 0 });
      }
    });
  }
  // scrollBehavior(to, from, savedPosition) {
  //   // 始终滚动到顶部
  //   return { top: 0 }
  // }
});

/** 重置路由 */
export function resetRouter() {
  router.clearRoutes();
  for (const route of remainingRouter) {
    router.addRoute(route);
  }
  // TODO: 清除缓存页面
}

/** 设置页面标题 */
const setPageTitle = (_to: any) => {
  // TODO: 设置页面标题
   // if (!isUrl(to?.name as string)) {
  //   to.matched.some(item => {
  //     if (!item.meta.title) return "";
  //     const Title = getConfig().Title;
  //     document.title = Title ? `${item.meta.title} | ${Title}` : item.meta.title as string;
  //   });
  // }
};

/** 处理路由跳转 */
const handleRouteNavigation = (_to: any, _from: any, next: any) => {
  // TODO: 实现你的路由跳转逻辑
  // const userInfo = storageLocal().getItem<DataInfo<number>>(userKey);

  // 已登录用户
  // if (Cookies.get(multipleTabsKey) && userInfo) {
  //   // 权限检查
  //   if (to.meta?.roles && !isOneOfArray(to.meta?.roles, userInfo?.roles)) {
  //     return next({ path: "/error/403" });
  //   }

  //   // 隐藏首页检查
  //   if (VITE_HIDE_HOME === "true" && to.fullPath === "/welcome") {
  //     return next({ path: "/error/404" });
  //   }

  //   // 外部链接处理
  //   if (from?.name && isUrl(to?.name as string)) {
  //     openLink(to?.name as string);
  //     NProgress.done();
  //     return;
  //   }

  //   // TODO: 动态路由处理 - 替换为你的实际逻辑
  //   if (!from?.name && to.path !== "/login") {
  //     // 这里添加你的动态路由加载逻辑
  //     // 例如: await loadDynamicRoutes();
  //     if (isAllEmpty(to.name)) router.push(to.fullPath);
  //   }

  //   // 白名单检查
  //   return whiteList.includes(to.fullPath) ? next(from.fullPath) : next();
  // }

  // 未登录用户
  // if (to.path !== "/login") {
  //   return whiteList.indexOf(to.path) !== -1 ? next() : (removeToken(), next({ path: "/login" }));
  // }

  next();
};

router.beforeEach((to: any, from, next) => {
  // TODO: 处理 keepAlive - 替换为你的实际逻辑
  // if (to.meta?.keepAlive) {
  //   handleAliveRoute(to, "add");
  //   if (from.name === undefined || from.name === "Redirect") {
  //     handleAliveRoute(to);
  //   }
  // }

  // console.log("路由跳转:", { from: from.path, to: to.path, name: to.name });

  NProgress.start();
  setPageTitle(to);
  handleRouteNavigation(to, from, next);
});

router.afterEach(() => {
  NProgress.done();
});

// const viewModules = import.meta.glob("@/views/**/*.vue");

// 1. 定义 404 路由
const notFoundRoute: RouteRecordRaw = {
  path: "/:pathMatch(.*)*",
  name: "NotFound",
  component: () => import("@/views/error/404.vue")
};

// 2. 在所有 addRoute 之后注册 404 路由（只注册一次）
function ensureNotFoundRoute(router: Router) {
  const exists = router.getRoutes().some(route => route.path === notFoundRoute.path);
  if (!exists) {
    router.addRoute(notFoundRoute);
  }
}

// 封装一个异步初始化方法
export async function setupDynamicRoutes() {
  // 打印初始路由
  // console.log("初始路由:", router.getRoutes().map(r => ({ path: r.path, name: r.name })));
  const res = await getAsyncRoutes();
  if (res.code === 200 && Array.isArray(res.data)) {
    // const convert = (routes: any[]): RouteRecordRaw[] =>
    //   routes.map(route => {
    //     const r: RouteRecordRaw = {
    //       path: route.path,
    //       name: route.name,
    //       meta: route.meta,
    //       component: route.component
    //         ? () => import(/* @vite-ignore */ `@/views${route.component}.vue`)
    //         : undefined,
    //       children: route.children ? convert(route.children) : undefined,
    //     };
    //     return r;
    //   });
    const viewModules = import.meta.glob("@/views/**/*.vue");

    // 打印所有可用的组件模块
    // console.log("可用的组件模块:", Object.keys(viewModules));

    /**
     * 路由转换函数 - 处理嵌套路由结构
     * 
     * 问题背景：
     * 1. 后端返回的路由数据中，子路由的 component 路径是相对于父路由的
     * 2. 例如：父路由 /home 的 component 是 /home/index，子路由 test 的 component 是 /home/test
     * 3. 如果直接注册为父子路由，子路由无法正确渲染，因为缺少路由出口
     * 
     * 为什么一定要有 router-view 子路由出口？
     * 1. Vue Router 的工作原理：当访问嵌套路由时，Vue Router 会按照路由层级依次渲染组件
     * 2. 父路由组件必须提供 <router-view /> 作为子路由的渲染出口
     * 3. 如果没有 <router-view />，子路由的组件无法被渲染到页面上
     * 4. 这就是为什么直接注册父子路由会导致子路由无法显示的根本原因
     * 
     * 解决方案：
     * 1. 对于有子路由的父路由，将其改为布局路由，使用 PageLayout.vue 作为容器
     * 2. PageLayout.vue 只包含 <router-view />，用于渲染子路由
     * 3. 将原来的父路由组件作为默认子路由（/index）
     * 4. 这样既保持了路由的层级关系，又避免了在页面组件中手动添加 <router-view />
     * 
     * 路由结构示例：
     * 转换前：/home (home/index.vue) + /home/test (home/test.vue)
     * 转换后：
     *   /home (router-view/index.vue)
     *   ├── /home/index (home/index.vue) - 默认页面
     *   └── /home/test (home/test.vue) - 子页面
     * 
     * 注意：
     * 根路径 "/" 已在静态路由中配置，使用 layout/index.vue + home/index.vue
     * 动态路由转换只处理其他路径的嵌套路由结构
     */
    const convert = (routes: any[]): RouteRecordRaw[] =>
      routes.map(route => {
        const componentPath = route.component ? `/src/views${route.component}.vue` : null;
        const component = componentPath ? viewModules[componentPath] : null;

        // console.log(`路由 ${route.path} 的组件路径:`, componentPath, "组件存在:", !!component, route.orderNum);

        // 处理有子路由的情况：将其转换为布局路由结构
        if (route.children && route.children.length > 0) {
          return {
            path: route.path,
            name: route.name,
            // redirect: route.redirect || `${route.path}/index`,
            redirect: route.redirect || route.path,
            meta: route.meta,
            component: () => import("@/layout/router-view/index.vue"),
            children: [
              {
                // name: route.name,
                // path: "index",
                // path: "",
                name: `${route.name}-index`,
                path: '',
                component: component,
                meta: route.meta,
              },
              ...route.children.map((child: any) => {
                const childComponentPath = child.component ? `/src/views${child.component}.vue` : null;
                const childComponent = childComponentPath ? viewModules[childComponentPath] : null;

                return {
                  path: child.path,
                  name: child.name,
                  component: childComponent,
                  meta: child.meta,
                };
              })
            ]
          };
        }

        // 没有子路由的情况：直接返回原路由
        return {
          path: route.path,
          name: route.name,
          redirect: route.redirect,
          meta: route.meta,
          component: component,
          children: [],
        };
      });

    const dynamicRoutes = convert(res.data);

    // 将动态路由注册为根路由的子路由
    dynamicRoutes.forEach(route => {
      router.addRoute("Root", route);
    });

    // 打印所有注册的路由
    // console.log("所有路由:", router.getRoutes().map(r => ({ path: r.path, name: r.name })));
  }
  // 保证 404 路由在最后
  ensureNotFoundRoute(router);
}

// --- END ---

export default router;
